import React from 'react'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import TypeList from './components/TypeList/Index'
import ConfigList from './components/ConfigList/Index'
import style from './Index.module.less'
import { message } from 'antd'

class ConfigSetter extends Component {
  state = {
    typeLoading: false,
    typeList: [],
    currentType: null
  }

  initTypeList () {
    this.setState({ typeLoading: true })
    this.$get('/api/common/dictionary/getTypeList')
      .then(res => {
        this.setState({ typeLoading: false })
        if (res.status === 1) {
          this.setState({ typeList: res.data, currentType: res.data.length > 0 ? res.data[0] : null })
        } else {
          return message.warning(res.message)
        }
      })
      .catch(() => {
        this.setState({ typeLoading: false })
      })
  }

  componentDidMount () {
    this.initTypeList()
  }

  render () {
    return (
      <div className={style.container}>
        <div className={style['title-line']}>
          <span>{this.props.title}</span>
        </div>
        <div className={style.inner}>
          <div className={style.line} />
          <div className={style['type-container']}>
            <TypeList data={this.state.typeList} loading={this.state.typeLoading} value={this.state.currentType} onChange={(v) => this.setState({ currentType: v })} />
          </div>
          <div className={style['config-container']}>
            <ConfigList currentType={this.state.currentType} />
          </div>
        </div>
      </div>
    )
  }
}

const mapState = mapStateToProps(function (state) {
  return {
    userInfo: state.basic.userInfo
  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(ConfigSetter)
